import { useEffect, useState } from 'react';

import ReactQuill from 'react-quill';
import { Post } from '../../types';

import 'react-quill/dist/quill.snow.css';

function Right({ post }: { post: Post }) {
  const [content, setContent] = useState<string>('');
  const [currentPost, setCurrentPost] = useState(post);

  useEffect(() => {
    setCurrentPost(post);
  }, [post]);

  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image'],
      ['clean'],
    ],
  };

  const formats = [
    'header',
    'bold',
    'italic',
    'underline',
    'background',
    'strike',
    'blockquote',
    'list',
    'bullet',
    'indent',
    'link',
    'image',
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 42px)' }}>
      <div style={{ display: 'flex' }}>
        <input
          style={{
            border: '1px solid #ccc',
            borderBottom: 0,
            borderRadius: 0,
            fontSize: '1.5rem',
            height: 48,
            fontWeight: 'bolder',
            outline: 'none',
            padding: '4px 8px',
            flexGrow: 1,
          }}
          value={currentPost.title}
        />
        <button
          style={{
            border: '1px solid #ccc',
            borderBottom: 0,
            borderRadius: 0,
            paddingLeft: '1rem',
            paddingRight: '1rem',
            fontSize: '1rem',
            fontWeight: 'bolder',
            outline: 'none',
            padding: '4px 8px',
            height: 48,
            cursor: 'pointer',
          }}
          onClick={() => {
            console.log(content);
          }}
        >
          保存
        </button>
      </div>
      <ReactQuill value={content} onChange={setContent} style={{ flexGrow: 1 }} modules={modules} formats={formats} />
    </div>
  );
}

export default Right;
